<div role="raml-editor" class="{{theme}}">
  <div role="notifications" ng-controller="notifications" class="hidden" ng-class="{hidden: !shouldDisplayNotifications, error: level === 'error'}">
    {{message}}
    <i class="fa" ng-class="{'fa-check': level === 'info', 'fa-warning': level === 'error'}" ng-click="hideNotifications()"></i>
  </div>

  <header>
    <h1>
      <strong>API</strong> Designer
    </h1>

    <a role="logo" target="_blank" href="http://mulesoft.com"></a>
  </header>

  <ul class="menubar">
    <li class="menu-item menu-item-ll">
      <raml-editor-project-button></raml-editor-project-button>
    </li>
    <li class="menu-item menu-item-ll">
      <raml-editor-view-button></raml-editor-view-button>
    </li>
    <li class="menu-item menu-item-ll">
      <raml-editor-help-button></raml-editor-help-button>
    </li>
    <li class="spacer file-absolute-path">{{getSelectedFileAbsolutePath()}}</li>
    <li class="menu-item menu-item-fr menu-item-mocking-service" ng-show="getIsMockingServiceVisible()" ng-controller="mockingServiceController" ng-click="toggleMockingService()">
      <div class="title">Mocking Service</div>
      <div class="field-wrapper" ng-class="{loading: loading}">
        <i class="fa fa-spin fa-spinner" ng-if="loading"></i>
        <div class="field" ng-if="!loading">
          <input type="checkbox" value="None" id="mockingServiceEnabled" ng-checked="$root.enabled" ng-click="$event.preventDefault()" />
          <label for="mockingServiceEnabled"></label>
        </div>
      </div>
    </li>
  </ul>

  <div role="flexColumns">
    <raml-editor-file-browser role="browser"></raml-editor-file-browser>

    <div id="browserAndEditor" ng-splitter="vertical" ng-splitter-collapse-target="prev"><div class="split split-left">&nbsp;</div></div>

    <div role="editor" ng-class="{error: currentError}">
      <div id="code" role="code"></div>

      <div role="shelf" ng-show="getIsShelfVisible()" ng-class="{expanded: !shelf.collapsed}">
        <div role="shelf-tab" ng-click="toggleShelf()">
          <i class="fa fa-inbox fa-lg"></i><i class="fa" ng-class="shelf.collapsed ? 'fa-caret-up' : 'fa-caret-down'"></i>
        </div>

        <div role="shelf-container" ng-show="!shelf.collapsed" ng-include src="'views/raml-editor-shelf.tmpl.html'"></div>
      </div>
    </div>

    <div id="consoleAndEditor" ng-show="getIsConsoleVisible()" ng-splitter="vertical" ng-splitter-collapse-target="next" ng-splitter-min-width="470"><div class="split split-right">&nbsp;</div></div>

    <div ng-show="getIsConsoleVisible()" role="preview-wrapper" class="raml-console-embedded">
      <div ng-show="getIsMockingService1()">
        <div class="mocking-service-popover orange">
          <div class="col">
            <div class="mocking-service-text">A new mocking service is available. Upgrading takes just seconds.</div>
            <div>
              <a class="mocking-service-link" href="https://docs.mulesoft.com/design-center/design-migrating-ms" rel="noopener" target="_blank">See what’s new</a>
            </div>
          </div>
          <div class="col right">
            <div class="right-col" ng-controller="mockingServiceController" ng-click="toggleMockingService(true)">
              <button class="mocking-service-button" ng-click="">Upgrade</button>
            </div>
          </div>
        </div>
      </div>

      <div ng-show="getIsMigrationSuccessful()">
        <div class="mocking-service-popover green">
          <div class="col">
            <div class="mocking-service-text">Your mocking service has been successfully upgraded!</div>
            <div>
              <a class="mocking-service-link" href="https://docs.mulesoft.com/design-center/design-migrating-ms" rel="noopener" target="_blank">See what’s new</a>
            </div>
          </div>
          <div class="col right">
            <div class="right-col" ng-click="closeMigrationHint()">
              <button class="mocking-service-button" ng-click="">Dismiss</button>
            </div>
          </div>
        </div>
      </div>

      <div ng-if="!splitterCollapsed_consoleAndEditor && getIsConsoleVisible()">
        <raml-console raml="raml" errors="ramlError" disable-description="true"
            options="{ singleView: true, disableThemeSwitcher: true, disableRamlClientGenerator: true, disableTitle: true}"
            style="padding: 0; margin-top: 0;"></raml-console>
      </div>
    </div>
  </div>
</div>
